<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单摄像头测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .camera-section {
            margin-bottom: 20px;
            text-align: center;
        }
        .camera-feed {
            border: 2px solid #ddd;
            border-radius: 4px;
            max-width: 100%;
            height: auto;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
        }
        .status.connecting { background-color: #fff3cd; color: #856404; }
        .status.connected { background-color: #d4edda; color: #155724; }
        .status.error { background-color: #f8d7da; color: #721c24; }
        .controls {
            margin: 20px 0;
            text-align: center;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        button:disabled { background: #6c757d; cursor: not-allowed; }
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            height: 150px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        .roi-div {
            position: absolute;
            border: 2px solid #ff0000;
            background-color: rgba(255, 0, 0, 0.2);
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📹 简单摄像头测试</h1>
        <p>测试摄像头连接和ROI功能</p>
        
        <div class="camera-section">
            <h2>摄像头画面</h2>
            <div style="position: relative; display: inline-block;">
                <img id="cameraFeed" class="camera-feed" src="http://127.0.0.1:5001/video_feed" draggable="false" />
                <div id="roiDiv" class="roi-div" style="display: none;"></div>
            </div>
            <div id="status" class="status connecting">🔄 正在连接摄像头...</div>
        </div>
        
        <div class="controls">
            <button onclick="testROI()">测试ROI模式</button>
            <button onclick="testHSV()">测试HSV校准</button>
            <button onclick="clearLog()">清除日志</button>
        </div>
        
        <div class="log" id="log"></div>
    </div>

    <script>
        const cameraFeed = document.getElementById('cameraFeed');
        const status = document.getElementById('status');
        const log = document.getElementById('log');
        const roiDiv = document.getElementById('roiDiv');
        
        let roiMode = false;
        let roiStart = null;
        let roiRect = null;
        
        function logMessage(message) {
            const timestamp = new Date().toLocaleTimeString();
            log.innerHTML += `[${timestamp}] ${message}\n`;
            log.scrollTop = log.scrollHeight;
        }
        
        function testROI() {
            if (!roiMode) {
                logMessage('🔧 进入ROI模式');
                roiMode = true;
                status.textContent = '🔒 ROI模式已启用';
                status.className = 'status connecting';
                
                // 发送暂停请求
                fetch('http://127.0.0.1:5001/pendulum_pause', {method: 'POST'})
                    .then(response => logMessage(`✅ 暂停请求成功: ${response.status}`))
                    .catch(error => logMessage(`❌ 暂停请求失败: ${error}`));
            } else {
                logMessage('🔓 退出ROI模式');
                roiMode = false;
                status.textContent = '✅ 摄像头已连接';
                status.className = 'status connected';
                roiDiv.style.display = 'none';
                
                // 发送恢复请求
                fetch('http://127.0.0.1:5001/pendulum_resume', {method: 'POST'})
                    .then(response => logMessage(`✅ 恢复请求成功: ${response.status}`))
                    .catch(error => logMessage(`❌ 恢复请求失败: ${error}`));
            }
        }
        
        function testHSV() {
            if (!roiRect) {
                logMessage('❌ 请先选择ROI区域');
                return;
            }
            
            logMessage('🎯 测试HSV校准');
            fetch('http://127.0.0.1:5001/hsv_calibration', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    roi: roiRect,
                    action: 'calibrate'
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    logMessage(`✅ HSV校准成功: ${JSON.stringify(data)}`);
                } else {
                    logMessage(`❌ HSV校准失败: ${data.message}`);
                }
            })
            .catch(error => {
                logMessage(`❌ HSV校准请求失败: ${error}`);
            });
        }
        
        function clearLog() {
            log.innerHTML = '';
            logMessage('🧹 日志已清除');
        }
        
        // 摄像头事件监听
        cameraFeed.addEventListener('load', () => {
            logMessage('✅ 摄像头连接成功');
            status.textContent = '✅ 摄像头已连接';
            status.className = 'status connected';
        });
        
        cameraFeed.addEventListener('error', () => {
            logMessage('❌ 摄像头连接失败');
            status.textContent = '❌ 摄像头连接失败';
            status.className = 'status error';
        });
        
        // ROI选择功能
        cameraFeed.addEventListener('mousedown', (e) => {
            if (!roiMode) return;
            
            const rect = cameraFeed.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            roiStart = {x, y};
            roiDiv.style.display = 'block';
            roiDiv.style.left = x + 'px';
            roiDiv.style.top = y + 'px';
            roiDiv.style.width = '0px';
            roiDiv.style.height = '0px';
            
            logMessage(`📍 ROI开始: (${x}, ${y})`);
        });
        
        cameraFeed.addEventListener('mousemove', (e) => {
            if (!roiMode || !roiStart) return;
            
            const rect = cameraFeed.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const startX = Math.min(roiStart.x, x);
            const startY = Math.min(roiStart.y, y);
            const width = Math.abs(x - roiStart.x);
            const height = Math.abs(y - roiStart.y);
            
            roiDiv.style.left = startX + 'px';
            roiDiv.style.top = startY + 'px';
            roiDiv.style.width = width + 'px';
            roiDiv.style.height = height + 'px';
        });
        
        cameraFeed.addEventListener('mouseup', (e) => {
            if (!roiMode || !roiStart) return;
            
            const rect = cameraFeed.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const startX = Math.min(roiStart.x, x);
            const startY = Math.min(roiStart.y, y);
            const width = Math.abs(x - roiStart.x);
            const height = Math.abs(y - roiStart.y);
            
            if (width > 10 && height > 10) {
                roiRect = {
                    x: Math.round(startX),
                    y: Math.round(startY),
                    w: Math.round(width),
                    h: Math.round(height)
                };
                logMessage(`✅ ROI选择完成: ${JSON.stringify(roiRect)}`);
            } else {
                logMessage('❌ ROI区域太小');
                roiDiv.style.display = 'none';
            }
            
            roiStart = null;
        });
        
        // 页面加载时记录
        window.addEventListener('load', () => {
            logMessage('📄 页面已加载');
        });
    </script>
</body>
</html> 